<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>index页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<header>
			<h1>index页面</h1>
		</header>
		<main>
			<form action="http://localhost/submit.php" method="POST">
			<fieldset>
				<legend>测试</legend>
				<input  name="name" type="text" pattern="[a-zA-Z]{5,20}" 
				autocomplete="off"  id="inp1"
				oninvalid="validate('请输入5~20位字母的用户名')">
			</fieldset>
			<fieldset>
				<legend>课程</legend>
				<select name="lesson">
					<optgroup label="后台">
						<option value="php">PHP</option>
			            <option value="linux">LINUX</option>
			            <option value="mysql">MYSQL</option>
					</optgroup>
					<optgroup label="前台">
						<option value="html">HTML</option>
			            <option selected="selected" value="js">JAVASCRIPT</option>
			            <option value="css">CSS</option>
					</optgroup>
				</select>
			</fieldset>
		<button  id="bt2">提交表单</button>
		</form>
		</main>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script src="index.js"></script>
	<script type="text/javascript">
		function validate(message) {
			alert(message);
		}
		console.log($('[name=name]').attr('autocomplete'), inp1.autocomplete)
	</script>
</body>
</html>